<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, viewport-fit=cover">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,target-densitydpi=device-dpi, user-scalable=no" />
		<title>闹钟提醒</title>
		<link href="../lib/mint-ui@2.2.13.css" rel="stylesheet">
		<link href="../css/common.css" rel="stylesheet">
		<link href="../css/userinfo.css" rel="stylesheet">
		<script src="../lib/vue.js"></script>
	</head>
	<body oncontextmenu="return false" onselectstart="return false" ondragstart="return false" οncοpy="return false">
		<div id="sitAlarm" class="userInfo sitAlarm" style="display: none;" :style="{display: 'block'}">
			<div class="header">
				<a class="back" href="javascript:history.go(-1)"></a>
				<div class="title">闹钟提醒</div>
			</div>
			<div class="list" v-if="!showAdd">
				<div class="list-item" v-for="item in list" :key="item.type" @click.self="editAlarm(item)">
					<div class="lable">
						<div class="text">08:00</div>
						<div class="tips">一 二 三 四</div>
					</div>
					<mt-switch v-model="item.status === 1"></mt-switch>
				</div>
				<div class="no-data" v-if="list.length === 0">
					<img src="../img/setting/pic_no_data@2x.png">
					<div class="text">还未设置闹钟，最多可以设置8个闹钟哦</div>
				</div>
				<div class="form-btn" v-if="list.length < 9" @click="showAddFunc()">添加闹钟</div>
			</div>

			<div class="addAlarm myPicker" v-else>
				<mt-picker :slots="alarmSlots" @change="alarmPicker" :item-height="60" :visible-item-count="5"></mt-picker>
				<div class="form">
					<div class="form-item" @click="popupVisible = true">
						<div class="lable">提醒</div>
						<div class="value">{{rateList.find(v=>v.value === info.frequency).text}}</div>
					</div>
				</div>
				<div class="form-btn" @click="addConfirm">保存</div>
			</div>

			<div class="myPicker">
				<mt-popup v-model="popupVisible" position="bottom">
					<div class="title">提醒</div>
					<mt-picker :slots="slots" value-key="text" @change="onValuesChange" :item-height="60" :visible-item-count="4"></mt-picker>
				</mt-popup>
			</div>
			<div class="myPicker">
				<mt-popup v-model="customPop" position="bottom">
					<div class="title">自定义提醒</div>
					<mt-checklist
						align="right"
						v-model="custom"
						:options="options">
					</mt-checklist>
					<div class="picker-btn">
						<div class="cancel" @click="cancel">取消</div>
						<div class="confirm" @click="confirm">保存</div>
					</div>
				</mt-popup>
			</div>
		</div>
		<script src="../lib/mint-ui@2.2.13.js"></script>
		<script src="../lib/dayjs.min.js"></script>
		<script src="../js/sitAlarm.js"></script>
	</body>
</html>